<template>
    <div>
        <el-tree
            :data="roledata"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
        >
        </el-tree>
        <el-button type="primary">保存</el-button>
        <el-button type="info">取消</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            roledata: [
                {
                    id: 1,
                    label: "全部数据",
                    children: [
                        {
                            id: 2,
                            label: "首页",
                            children: [
                                {
                                    id: 5,
                                    label: "首页",
                                },
                            ],
                        },
                        {
                            id: 3,
                            label: "产品管理",
                            children: [
                                {
                                    id: 6,
                                    label: "定期管理",
                                },
                                {
                                    id: 7,
                                    label: "新增定期产品",
                                },
                                {
                                    id: 8,
                                    label: "编辑定期产品",
                                },
                                {
                                    id: 9,
                                    label: "下架列表",
                                },
                                {
                                    id: 10,
                                    label: "活期管理",
                                },
                                {
                                    id: 11,
                                    label: "黄金管理",
                                },
                                {
                                    id: 12,
                                    label: "新增文章",
                                },
                                {
                                    id: 13,
                                    label: "编辑文章",
                                },
                                {
                                    id: 14,
                                    label: "文章回收站",
                                },
                                {
                                    id: 15,
                                    label: "基金管理",
                                },
                                {
                                    id: 16,
                                    label: "添加黄金产品",
                                },
                                {
                                    id: 17,
                                    label: "修改黄金产品",
                                },
                                {
                                    id: 18,
                                    label: "黄金回收站",
                                },
                                {
                                    id: 19,
                                    label: "新增基金",
                                },
                                {
                                    id: 20,
                                    label: "编辑基金",
                                },
                                {
                                    id: 21,
                                    label: "基金回收站",
                                },
                                {
                                    id: 22,
                                    label: "查看所有可添加活期",
                                },
                                {
                                    id: 23,
                                    label: "银行管理",
                                },
                                {
                                    id: 24,
                                    label: "新增银行",
                                },
                                {
                                    id: 25,
                                    label: "编辑银行",
                                },
                                {
                                    id: 26,
                                    label: "基金经理管理",
                                },
                                {
                                    id: 27,
                                    label: "新增基金经理",
                                },
                                {
                                    id: 28,
                                    label: "编辑基金经理",
                                },
                                {
                                    id: 29,
                                    label: "在线人数",
                                },
                            ],
                        },
                        {
                            id: 4,
                            label: "设置",
                            children: [
                                {
                                    id: 30,
                                    label: "员工管理",
                                    children: [
                                        {
                                            id: 35,
                                            label: "用户查看",
                                        },
                                        {
                                            id: 36,
                                            label: "用户添加",
                                        },
                                        {
                                            id: 37,
                                            label: "用户修改",
                                        },
                                        {
                                            id: 38,
                                            label: "用户删除",
                                        },
                                        {
                                            id: 39,
                                            label: "用户角色分配",
                                        },
                                    ],
                                },
                                {
                                    id: 31,
                                    label: "角色管理",
                                    children: [
                                        {
                                            id: 40,
                                            label: "角色修改",
                                        },
                                        {
                                            id: 41,
                                            label: "角色查看",
                                        },
                                        {
                                            id: 42,
                                            label: "角色添加",
                                        },
                                        {
                                            id: 43,
                                            label: "角色删除",
                                        },
                                        {
                                            id: 36,
                                            label: "角色权限分配",
                                        },
                                    ],
                                },
                                {
                                    id: 32,
                                    label: "APPcode值修改",
                                },
                                {
                                    id: 33,
                                    label: "优惠券管理",
                                },
                                {
                                    id: 34,
                                    label: "新增优惠券",
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: "children",
                label: "label",
            },
        };
    },
    methods: {
        handleChange(val) {
            console.log(val);
        },
    },
};
</script>

<style>
</style>